<template>
	<div id="fooddetail">
      <div class="bt">&nbsp;/&nbsp;所有&nbsp;/&nbsp;商品列表&nbsp;/&nbsp;商品详情</div>
      <div class="notice">
		<img :src="banner" alt="">
      </div>
      <div class="show_area">
		<div class="img_area">
			<img :src="fooddata.img_url" alt="" class="big_img">
			<div class="small_img">
				<div class="img_belt">
					<img :src="item" alt="" v-for="(item,index) in fooddata.img_area" :class="{border:index == img_index}" @mouseover="chang_img(index)">
				</div>
			</div>
		</div>
		<div class="recommend">
			<p class="title">【淘点网】{{ fooddata.title }}</p>
			<p class="label"><span v-for="(item,index) in fooddata.label">{{ item }}&nbsp;&nbsp;</span></p>
			<div class="price"><div class="price_one">价格:&nbsp;&nbsp;&nbsp;<span style="font:bold 14px/30px '微软雅黑';color:#FF0036">￥</span><span style="font:bold 25px/30px '微软雅黑';color:#FF0036">{{ fooddata.price_old | currency }}</span></div></div>
			<div class="sales">
				<ul>
					<li>月销量:&nbsp;<span style="color: #FF0036;font:15px/20px">{{ fooddata.mouth_sales }}</span></li>
					<li>总销量:&nbsp;<span style="color: #FF0036;font:15px/20px">{{ fooddata.total_sales }}</span></li>
					<li style="border-right: 0px">评价：:&nbsp;<span style="color: #FF0036;font:15px/20px">{{ fooddata.evaluate+'星'}}</span></li>
				</ul>
			</div>
			<div class="num"><div style="float: left;font:13px/30px '微软雅黑';color:#999;">数量:</div>
				<div class="num_change">
                   <computeds :num="food_num" @resnum="change" :index="index"></computeds>
				</div>
			</div>
			<div class="freight">
				运费:&nbsp;&nbsp;&nbsp;<span style="font:14px/30px '微软雅黑';color:#999">￥</span><span style="font:16px/30px '微软雅黑';color:#999">{{ fooddata.freight | currency}}</span>

			</div>
			<p class="total_num">
				总价:&nbsp;&nbsp;&nbsp;<span style="font:bold 14px/30px '微软雅黑';color:#FF0036">￥</span><span style="font:bold 25px/30px '微软雅黑';color:#FF0036">{{ total_num | currency}}</span>
			</p>
			<div class="btn">
				<button class="promptly" @click="buy()">立即购买</button>
				<button class="join" @click="join_car()"><i class="fa fa-shopping-cart" aria-hidden="true" style="font-size: 16px;line-height: 43px;color:#fff"></i>&nbsp;加入购物车</button>
			</div>	
		</div>
      </div>
		<re-commend></re-commend>
		<div class="evaluate">
			<p class="title">商品评论</p>
			<div style="width: 100%;height: 20px;"></div>
			<div class="main">
				<div class="advert"><img src="../../assets/kele.jpg" alt=""></div>
				<div class="language">
					<div style="width: 100%;height: 40px; ">
						评论区
					</div>
					<ul>
						<li v-for="(item,index) in evaluate_data" v-if="evaluate_data">
						<div style="width: 100%;height: 10px;clear: both"></div>
							<div style="width: 100%">
								<div class="photo"><span v-html="item.photo"></span><br><span style="font:13px/17px '微软雅黑';color:#666;">{{ item.username }}</span></div>
								<div class="text">
									<p class="content">{{ item.content }}</p>
									<div class="img" ><span v-for="(its,ins) in item.img_url" v-html="its"></span></div>
								</div>
							</div>
							<div class="time">发表于{{ item.create_time }}</div>
							<div style="width: 100%;height: 10px;clear: both"></div>
						</li>
						<li v-if="!evaluate_data" style="height: 40px;font:16px/40px;text-align: center;">
							还没有评论哦!
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
import recommend from '../index/recommend.vue';
import computeds from '../Public/computed.vue';
export default {
	data:function(){
		return {
			fooddata:'',		
			banner:'./static/img/activity.png',
			img_index:0,
			food_num:1,
			index:0,
			evaluate_data:''
		}
	},
	created:function(){
	    if(this.$cookie.uid ==''){
      		this.$router.push({path:'/'});
      		return false;
    	}
		var fid=this.$route.params.fid;
		this.get_food_data(fid);
		this.get_evaluate_Data(fid);
	},
	computed:{
		total_num:function(){
			return Math.round((this.fooddata.price_old*this.food_num+this.fooddata.freight)*100)/100;
		}
	},
	components:{
		ReCommend:recommend,
		    'computeds':computeds

	},
	 filters: {
	    currency: function (value) {
	    	return parseInt(value).toFixed(2);
	    }
	  },
	methods:{
		chang_img(index){

			this.fooddata.img_url = this.fooddata.img_area[index];
			this.img_index=index; 
		},
	    change(data){
	      this.food_num=data.number;
	    },
		get_food_data(fid){
		    this.$http({
		        method:'GET',
		        url:'http://123.56.86.203/fooddetail?fid='+fid,
		    }).then(function(info){
		    	var data=info.data;
				if(data.status == 0){
					this.fooddata =data.info;
					
				}else{
					alert('数据已被删除');
					history.back();
				}
		    },function(error){
		          console.log(error);
		    })
		},
		get_evaluate_Data(fid){
		    this.$http({
		        method:'GET',
		        url:'http://123.56.86.203/evaluate/list?fid='+fid,
		    }).then(function(info){
				var data=info.data;
				if(data.status == 0){
					this.evaluate_data=data.info;
				}
		    },function(error){
		          console.log(error);
		    })
		},
		buy(){
			var uid=this.$cookie.get('uid');
			if(uid == null){
				alert('请登录后购买');	
			}else{
			    this.$router.push({ name: 'pay', params: { flow:1,fid: this.fooddata.id ,uid:uid,num:this.food_num}});
			}
		
		},
		join_car(){
			var goods=new Object();
			goods={fid:this.fooddata.id,uid:this.$cookie.get('uid'),num:this.food_num,single_price:this.fooddata.price_old,status:0};

	        this.$http.post("http://123.56.86.203/food/joincar",
	          {
	             goods:goods
	          },
	          {emulateJSON:true}
	        ).then(response=>{
				var data=response.data;
				if(data.status == 0){
					alert('添加成功');
					window.location.reload();
				}else{
					alert(data.info);
				}
	        })
		}
	}
}	
</script>
<style>
.evaluate .main .language ul li .photo img{
	width: 100%;
	height: 60px;
}
.evaluate .main .language ul li .img img{
	width: 40px;
	height: 40px;
	margin-right:10px;
	margin-bottom: 5px;
}
</style>
<style scoped>
#fooddetail{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.show_area{
	width: 100%;
	margin-top: 5px;

}
.show_area .img_area{
	margin-top: 10px;
	float: left;
	height: 490px;
	width: 50%;
	background-color: rgba(255,255,255,0.3);

}
.show_area .big_img{
	height: 380px;
	width: 100%;
	border-radius: 50px;
}
.show_area .small_img{
	height: 64px;
	width: 100%;
	padding: 10px;
	padding-bottom:0px;
	margin: 10px 0px;
}
.show_area .small_img .img_belt{
	height: 64px;
	overflow: hidden;
}
.show_area .small_img .img_belt .border{
	border: 2px solid #009BDB;
}
.show_area .small_img .img_belt img{
	height: 60px;
	width: 100px;
	margin-right: 24px
}
.show_area .recommend{
	float: left;
	margin-top:20px;
	height: 480px;
	margin-left: 3%;
	width: 47%;
	background-color: rgba(255,255,255,0.3);
}
.show_area .recommend .title{
	height: 30px;
	padding-left:15px;
	font:bold 20px/30px '微软雅黑';
	color:#000;
	margin-top: 20px;
}
.show_area .recommend .label{
	height: 25px;
	padding-left:30px;
	font:14px/25px '微软雅黑';
	color:#cc0000;
}
.show_area .recommend .label span{
	font:14px/25px '微软雅黑';
	color:#cc0000;
}
.show_area .recommend .price{
	height: 30px;
	margin-top: 20px;
}
.show_area .recommend .price .price_one{
	font:13px/30px '微软雅黑';
	color:#999;	
	margin-left: 30px;
	float: left;
}

.show_area .recommend .sales{
	margin-top: 20px;
	border-top:1px dashed #aaa;
	height: 40px;
	border-bottom:1px dashed #aaa;	
}
.show_area .recommend .sales ul li{
	float: left;
	width: 32%;
	margin-top:10px;
	height: 20px;
	border-right: 1px solid #aaa;
	text-align: center;
	font:13px/20px '微软雅黑';
	color:#999;
}
.show_area .recommend .num{
	height: 30px;
	padding-left:30px;

	margin-top: 20px;
}
.show_area .recommend .num .num_change{
	margin-left: 15px;
	height: 30px;
	width: 120px;

	float: left;
} 


.show_area .recommend .freight{
	height: 30px;
	padding-left:30px;
	font:13px/30px '微软雅黑';
	color:#999;
	margin-top: 20px;
}
.show_area .recommend .total_num{
	height: 30px;
	padding-left:30px;
	font:13px/30px '微软雅黑';
	color:#999;
	margin-top: 20px;
}
.show_area .recommend .btn{

	padding-left:30px;
	margin-top: 45px;
}
.show_area .recommend .btn .promptly{
	width: 40%;
	height:45px;
	border: 1px solid #FF0036;
	color:#FF0036;
	text-align: center;
	font:18px/43px '微软雅黑';
	background-color: #fff;
}
.show_area .recommend .btn .join{
	width: 40%;
	height:45px;
	margin-left: 8%;
	border: 1px solid #fff;
	color:#fff;
	text-align: center;
	font:16px/43px '微软雅黑';
	background-color: #FF0036;
}
.notice{
	margin-top: 5px;
	height: 120px;
	width: 100%;
}
.notice img{
	width: 100%;
	height: 120px;
}
.evaluate{
	width: 100%;
	margin-top: 15px;
}
.evaluate .title{
	margin-top: 20px;
	font:bold 18px/20px '微软雅黑';
	height: 30px;
	border-bottom: 2px solid #aaa;
}
.evaluate .main{
	width: 98%;
	height: 120px;
	padding: 0 1%;
}
.evaluate .main .advert{
	width: 25%;
	float: left;
	height: 400px;
}
.evaluate .main .advert img{
	width: 100%;
	height: 100%;
}
.evaluate .main .language{
	float: right;
	width: 69%;
	background: #fff;
	padding:15px 2%;
}
.evaluate .main .language ul{
	width: 100%;
}
.evaluate .main .language ul li{
	width: 97%;
	border-bottom: 1px solid #ccc;
}
.evaluate .main .language ul li .photo{
	width:60px;
	height:75px;
	float: right;
	text-align: center;
}

.evaluate .main .language ul li .text{
	float: left;
	width: 570px;
	height: 60px;
}
.evaluate .main .language ul li .text .username{
	font:14px/22px '微软雅黑';
	color:#666;
}
.evaluate .main .language ul li .text .content{
	font:17px/18px '仿宋';
	color:#000;
}
.evaluate .main .language ul li .img{
	margin-top:10px;
	float: left;
}

.evaluate .main .language ul li .time{
	width: 100%;
	float: left;
	margin-top: 5px;
	font:13px/18px '微软雅黑';
	color:#999;

}
@media (max-width: 800px) {
      .img {
      max-width: 100%;
      margin: 20px;
      }
 }
</style>
